import React from 'react';
import './index.css'; // 导入样式文件
import { useNavigate } from 'react-router-dom'; // 导入路由导航函数

// 定义一个React函数组件Index
const Index: React.FC = () => {
    // 使用React Router提供的useNavigate hook来获取导航函数
    const navigate = useNavigate();

    // 当点击“横版二维码”时触发此函数，导航到'/designimg'页面
    const toDesign = () => {
        navigate('/designimg');
    };

    // 返回JSX结构
    return (
        <div>
            <h3>常用场景</h3>
            <div>
                {/* 横版二维码，点击跳转 */}
                <dl onClick={toDesign}>
                    <dt>
                        <img src="//pub-cdn-oss.chuangkit.com/designKind/277" alt="横版二维码示例" />
                    </dt>
                    <dd>
                        <p><span>横版二维码</span></p>
                        <p>1242×2208px</p>
                    </dd>
                </dl>

                {/* 其他场景项类似，省略了事件绑定和点击处理逻辑 */}
                <dl>
                    <dt>
                        <img src="//pub-cdn-oss.chuangkit.com/designKind/447" alt="手机海报示例" />
                    </dt>
                    <dd>
                        <p><span>手机海报</span></p>
                        <p>1242×2208px</p>
                    </dd>
                </dl>
                {/* 更多场景... */}

            </div>
        </div>
    );
};

export default Index; // 导出组件